<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px" style='margin-top: 20px;'>
            <el-row :gutter="24" class="mb8">
                <el-col :span="12">
                    <div class="title">
                        <span class="border"></span>
                        <span>模板基本信息</span>
                    </div>
                    <el-form-item label="模板名称：" prop="templateName" verify>
                        <el-input v-model="form.templateName" disabled placeholder="请输入" style="width: 200px;"
                            show-word-limit maxlength="10" />
                    </el-form-item>
                    <div class="title">
                        <span class="border"></span>
                        <span>模板配置</span>
                    </div>
                    <el-form-item label="模板状态：" prop="enable" verify>
                        <el-switch v-model="form.enable" disabled>
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
                <el-col :span="6">
                    <div class="left-aside">
                        <div class="title">加“<span>*</span>”号的节点默认为必选项</div>
                        <el-checkbox-group v-model="form.tcheckboxList">
                            <el-checkbox v-for="item in templateList" disabled :label="item.moduleName" :key="item.id">
                                <span v-if="item.id < 4" class="star">{{ item.moduleName }} <span>*</span></span>
                                <span v-else>{{ item.moduleName }}</span>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="content">
                        <template v-for="item in templates_obj">
                            <div class="templateView" v-if="form.tcheckboxList.includes(item[0])">
                                <div class="right">{{ item[0] }}</div>
                                <div class="item" v-for="ite in item">{{ ite }}</div>
                            </div>
                        </template>
                    </div>
                    <div class="btnWarp">
                        <el-button v-preventReClick size="mini" @click="cancel">取消</el-button>
                        <el-button v-preventReClick type="primary" size="mini" @click="cancel">关闭</el-button>

                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import {
    detailEvidence
} from "@/api/testify/template";
import { templateList, templates_obj } from "../template_obj"


export default {
    components: {
    },
    name: "UserGroupRole",
    data() {
        return {
            form: {
                templateName: '',
                enable: false,
                tcheckboxList: ["开启签署流程", "签署执行", "结束签署流程"]
            },
            templateList: templateList,
            templates_obj: templates_obj,
            testifyRowDetail: {}
        };
    },

    created() {
        this.testifyRowDetail = JSON.parse(sessionStorage.getItem('testifyRowDetail'));
        console.log(this.testifyRowDetail, 'this.testifyRowDetail')
        this.form.templateName = this.testifyRowDetail.templateName;
        this.form.enable = this.testifyRowDetail.enable == 1 ? true : false;
        let arr = [];
        let template = JSON.parse(this.testifyRowDetail.templateContent)
        template.map(match => {
            if (match.enable == 1) {
                arr.push(match.moduleName)
            }
        })
        this.form.tcheckboxList = [...arr];
        this.getDetail();
    },
    methods: {
        getDetail() {
            detailEvidence({ id: this.testifyRowDetail.id }).then(
                response => {

                }
            ).catch()
        },
        cancel() {
            this.$router.go(-1)
        }
    }
};
</script>
<style lang="scss">
.app-container {
    .left-aside {
        border: 1px solid #ddd;
        padding: 10px;

        .title {
            font-size: 12px;

            span {
                color: #e04765;
                font-size: 14px;
            }
        }
    }

    .content {
        .templateItem {
            margin-top: 50px;

            .title {
                background: #ddd;
                text-align: center;
                border-radius: 0 15px 0 0;
                width: 100px;
                height: 30px;
                line-height: 30px;

            }

            .fontWrap {
                background: #eee;
                display: flex;
                flex-wrap: wrap;
                padding: 20px;

                .fonts {
                    width: 100px;
                    margin: 0 80px 30px 0;
                }
            }
        }

        .templateView {
            margin: 10px auto;
            width: 402px;
            border: 1px solid #555;
            background: #eee;
            position: relative;

            .right {
                position: absolute;
                right: -30px;
                top: 80px;
                width: 30px;
                height: 150px;
                letter-spacing: 2px;
                font-size: 14px;
                background: #888;
                color: #fff;
                display: flex;
                align-items: center;
                text-align: center;
            }

            .item {
                padding-left: 10px;
                width: 400px;
                height: 40px;
                line-height: 40px;
                border-top: 1px solid #555;

                &:nth-of-type(2) {
                    background: #ccc;
                    font-weight: 600;
                    padding-left: 5px;
                    border-top: none;
                }

                &:nth-of-type(3) {
                    background: #ccc;
                    font-weight: 600;
                    padding-left: 5px;
                }
            }
        }
    }

    .btnWarp {
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin: 20px auto;
    }

    .el-checkbox {
        display: block;
        margin-top: 10px;
        font-weight: 400;
        color: #000 !important;

        .star {
            font-weight: 900;

            span {
                color: #e04765;
                font-weight: 400;
            }
        }
    }

    :deep(.is-checked) {
        .el-checkbox__label {
            color: #000 !important;
        }
    }

    .el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
        color: #000 !important;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #000 !important;
    }
}</style>